<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>慕慕手记首页</title>
		<!-- 初始化样式 -->
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<div class="header">
			<div class="header-container clearfix">
				<div class="header-left fl">
					<span><a href="">慕课网首页</a></span>
					<span><a href="">免费课</a></span>
					<span><a href="">实战课</a></span>
					<span>
						<a href="">体系课</a>
						<img src="images/new.png" alt="">
					</span>
					<span><a href="">慕课教程</a></span>
					<span><a href="">专栏</a></span>
					<span><a href="">手记</a></span>
					<span>
						<a href="">企业服务</a>
						<img src="images/new.png" alt="">
					</span>
				</div>
				<div class="header-right fr">
					<span>
						<i class="iconfont">&#xe60d;</i>
					</span>
					<span>
						<i class="iconfont">&#xe73c;</i>
					</span>
					<span class="login">
						<span><a href="">登录</a></span>
						<span>/</span>
						<span><a href="">注册</a></span>
					</span>
					
				</div>
			</div>
			</div>
		<div class="sub-header clearfix">
			<div class="sub-header-container">
				<div class="sub-header-left fl">
					<img src="images/article-logo.png" alt="">
					<img src="images/article-desc.png" alt="">
				</div>
				<div class="sub-header-right fr clearfix">
						<input type="text" class="fl" placeholder="搜索感兴趣的知识和文章">
						<span class="iconfont fl">&#xe60d;</span>
					
					
					<button class="fl">写文章</button>
				</div>
			</div>
			
			</div>
			<div class="article-container clearfix">
				<div class="left-menu fl">
					<div class="selected"><a href="">推荐</a></div>
					<div><a href="">自动化测试</a></div>
					<div><a href="">Python开发</a></div>
					<div><a href="">Java开发</a></div>
					<div><a href="">功能测试</a></div>
					<div><a href="">性能测试</a></div>
					<div><a href="">幽默段子</a></div>
				</div>
				<div class="article-warpper fl">
					<div class="article-inner">
						<div class="article-row clearfix">
							<div class="article-header-image fl">
								<img src="images/article-header.jpg" alt="">
							</div>
							<div class="article-desc fl">
								<div class="article-name">「讲师分享」一图读懂什么是研发效能</div>
								<div class="article-info clearfix">
									<article class="article-left fl">
										<span>资讯</span>
										<span class="iconfont">19235</span>
										<span>慕课网官方_运营中心</span>
										<span>资讯</span>
									</article>
									<div class="article-right fr">08.09</div>
								</div>
							</div>
						</div>
						<div class="article-row clearfix">
							<div class="article-header-image fl">
								<img src="images/article-header.jpg" alt="">
							</div>
							<div class="article-desc fl">
								<div class="article-name">「讲师分享」一图读懂什么是研发效能</div>
								<div class="article-info clearfix">
									<article class="article-left fl">
										<span>资讯</span>
										<span class="iconfont">19235</span>
										<span>慕课网官方_运营中心</span>
										<span>资讯</span>
									</article>
									<div class="article-right fr">08.09</div>
								</div>
							</div>
						</div>
						<div class="article-row clearfix">
							<div class="article-header-image fl">
								<img src="images/article-header.jpg" alt="">
							</div>
							<div class="article-desc fl">
								<div class="article-name">「讲师分享」一图读懂什么是研发效能</div>
								<div class="article-info clearfix">
									<article class="article-left fl">
										<span>资讯</span>
										<span class="iconfont">19235</span>
										<span>慕课网官方_运营中心</span>
										<span>资讯</span>
									</article>
									<div class="article-right fr">08.09</div>
								</div>
							</div>
						</div>
						<div class="article-row clearfix">
							<div class="article-header-image fl">
								<img src="images/article-header.jpg" alt="">
							</div>
							<div class="article-desc fl">
								<div class="article-name">「讲师分享」一图读懂什么是研发效能</div>
								<div class="article-info clearfix">
									<article class="article-left fl">
										<span>资讯</span>
										<span class="iconfont">19235</span>
										<span>慕课网官方_运营中心</span>
										<span>资讯</span>
									</article>
									<div class="article-right fr">08.09</div>
								</div>
							</div>
						</div>
						<div class="article-row clearfix">
							<div class="article-header-image fl">
								<img src="images/article-header.jpg" alt="">
							</div>
							<div class="article-desc fl">
								<div class="article-name">「讲师分享」一图读懂什么是研发效能</div>
								<div class="article-info clearfix">
									<article class="article-left fl">
										<span>资讯</span>
										<span class="iconfont">19235</span>
										<span>慕课网官方_运营中心</span>
										<span>资讯</span>
									</article>
									<div class="article-right fr">08.09</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		
	</body>
</html>